<template>
	<view class="main">
		<!--<view class="item">
			<view class="lable">
				到账类型
			</view>
			<view class="lr">
				<text class="it " :class="type==1?'act':''"  @click="tochanger(1)">支付宝</text>
				<text class="it " :class="type==2?'act':''"  @click="tochanger(2)">银行卡</text>
			</view>
		</view>-->
		<view class="item">
			<view class="lable">
				到账账户
			</view>
			<view class="lr" @click="toAdd">
				{{user.real_name_status==0?'去实名认证':user.bank_account}}
				<image src="../../static/ico/lr.png" mode="aspectFit" class="icor"></image>
			</view>
		</view>
		<view class="item">
			<view class="lable">
				提现金额
			</view>
			<view class="input">
			 <u-input
			    placeholder="请输入"
			    v-model="value"
				:maxlength="maxlength"
				border='false'
			    @input="change"
				type='digit'
				placeholderStyle="color: #BBBBBB;font-size: 24rpx;"
				color="#131415"
			  ></u-input>
			</view>
			<view class="lr" @click="toAll">
				全部提现
				<text class="dw">¥</text>
			</view>
		</view>
		<view class="monry">
			可提现金额{{myAnout == null|| myAnout == ''?'0.00':myAnout}}元
		</view>
		<view class="item">
			<view class="lable">
				手续费
			</view>
			<view class="lr dw">
					 {{fee}}%
			</view>
		</view>
		<view class="item">
			<view class="lable">
				实际到账
			</view>
			<view class="lr dw">
					¥ {{value?(value*(100-fee)/100).toFixed(2):0.00}}
			</view>
		</view>
		
		<view class="btn">
			<u-button  :loading="loading" size="small" @click="toShow" text="提现"></u-button>
		</view>
		
		<view class="tips">
			<view class="title">
				温馨提示
			</view>
			<view class="txt">
				1、申请提现最低金额￥{{min}} 起	
					</view>
				<view class="txt">
				2、申请提现后，预计1-3个工作日到账，到账账户为您设置的收款账户中，请注意查收~
			</view>
		</view>
		<CodePopup
		title="资金安全提示"
		btnText="确定提现"
		:loading="loading"
		@show="e=>codeShow=e" 
		:show="codeShow" 
		:username="form.username" 
		v-model="form.verify_code" 
		@submit="setWithdraw"
		></CodePopup>
	</view>
</template>

<script>
	import VerifyCode from '@/components/verifycode.vue'
	import CodePopup from '@/components/codePopup.vue'
		import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	export default {
			mixins:[mixin],
		components:{VerifyCode,CodePopup},
		data() {
			return {
				value:'',
				maxlength:15,
				myAnout:'0.00',
				fee:2.00,
				min:0,
				loading:false,
				codeShow:false,
				type:2,
				user:'',
				username:'',
				form:{
					username:'',
					verify_code:''
					
				}
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			this.getUser()
			this.form.username=this.userInfo.mobile
		
		},
		methods: {
		async getUser(){
			let datas=await this.getConfigDetail('transfer_rate')
			this.fee=datas.data.value
			console.log(this.fee*1)
			let mine=await this.getConfigDetail('transfer_min')
			this.min=mine.data.value
			let data = await this.$http({
				url:this.$api.getUser,
				method: 'POST',
				hideLoading: true,
				needToken:true,
				data:{}
			})
			if(data.code==200){
				this.myAnout=(data.data.money == ''?'0.00':data.data.money)
				this.user=data.data
				this.user.real_name_status=1
				this.tochanger(this.type)
				// this.myGoodsList()
			}
		},
			tochanger(e){
				this.type=e
				this.username=this.type==1?this.user.alipay_name:this.user.bank_name
			},
			toAll(){
				this.value=this.myAnout
			},
			toAdd(){
				if(this.user.real_name_status==0){
				uni.navigateTo({
						url:'/subpage/Verified/index'
				})
				}
				else {
				uni.navigateTo({
					url:'/pages/wallet/addBank'
				})
				}
			},
			toShow(){
				if(this.myAnout<this.value){
					this.$u.toast('可提现额度不足')
					return
				}
				if(this.value<this.min){
					this.$u.toast('最低提现金额'+this.min)
					return
				}
				if(!this.user.bank_account){
					this.$u.toast('请您先完成实名认证')
					return
				}
			
				this.loading=false
				this.codeShow=true
			},
			change(e){
				let value = e;
				let dot = value.indexOf('.');   //包含小数点
				let reg = /^[0-9]+$/;   //正整数
				if (dot > -1) {   
					this.maxlength = dot + 3;   //长度是小数点后两位
					if (value.length > dot + 3) {
				}
				}
				if (reg.test(value)) {   //如果是正整数不包含小数点
					this.maxlength = 10;
				}
			},
			async setWithdraw(){
				this.loading=true
				let data = await this.$http({
					url:this.$api.transfer,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						'username':this.form.username,
						'cash_money':this.value,
						'type':1,
						'verify_code':this.form.verify_code
					}
				})
					this.loading=false
				if(data.code==200){
					this.$u.toast('提现成功')
					this.getUser()
					this.codeShow=false
					this.value=''
					this.form.verify_code=''
				}else{
					this.$u.toast(data.msg)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		padding:0 32rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 34rpx 0;
			border-bottom: 1px solid #f5f5f5;
			.lable{
				font-size: 28rpx;
				font-weight: 600;
				color: #131415;
				line-height: 40rpx;
			}
			.input{
				flex: 1;
				margin-left: 20%;
				color: #FFFFFF !important;
				font-size: 26rpx;
			}
			.lr{
				font-size: 24rpx;
				font-weight: 600;
				color: #333;
				line-height: 34rpx;
				.it{border-radius: 10rpx;
					color:#333333;
					background: #f8f8f8;
					margin: 0 20rpx;
					padding: 10rpx 20rpx;
				}
				.act{					
					background: #2C2C2D;
					color:#FFFFFF;
				}
				
			}
			.icor{
				height: 22rpx;
				width: 22rpx;
			}
			.dw{
				font-size: 24rpx;
				font-weight: 600;
				color: #131415;
				line-height: 34rpx;
				margin-left: 5rpx;
			}
		}
		.monry{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin-top: 15rpx;
		}
		.btn{
			margin: 56rpx auto
			::v-deep button{
				color: #FFF;
				background:#000;
				font-size: 32rpx;
				border: 0;
				height: 82rpx;
				border-radius: 9rpx;
				&.u-button--disabled{
					opacity: 1;
					color: #979797;
					background: #252525;
				}
			}
		}
		.tips{
			.title{
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 34rpx;
			}
			.txt{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 44rpx;
				margin: 10rpx 0;
			}
		}
	}
</style>
